<!-- 没有图片的弹框 -->
<template>
	<view class="mosk">
		<view class="mosk-box">
			<view class="mosk-box-text">
				<view> 恭喜您，可激活 </view>
				<view> {{title}} </view>
				<view>{{title2}} </view>
			</view>
			<!-- 确认按钮 -->
			<view class="mosk-box-btn" @click="toParents"> 我知道了 </view>
		</view>
	</view>
</template>
<script>
	export default ({
		props: {
			// 身份
			title: {
				type: String,
				default: '',
			},
			// 绿色文字提示
			title2: {
				type: String,
				default: '',
			},
		},
		data() {
			return {}
		},
		methods: {
			// 关闭弹框
			toParents() {
				this.$emit('fromChild');
			}
		}
	})
</script>
<style scoped lang="scss">
	.mosk {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;

		&-box {
			animation: zoomInDown ease-in-out 0.6s;
			width: 630rpx;
			height: 468rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&-text {
				text-align: center;

				&>view:nth-child(1) {
					font-size: 32rpx;
					font-weight: 800;
					color: #262626;
					height: 32rpx;
					margin-top: 76rpx;
				}

				&>view:nth-child(2) {
					font-size: 40rpx;
					height: 40rpx;
					font-weight: 800;
					color: #262626;
					margin-top: 20rpx;
				}

				&>view:nth-child(3) {
					font-size: 28rpx;
					font-weight: bold;
					color: #4E9900;
					height: 28rpx;
					margin-top: 50rpx;
				}
			}

			&-btn {
				width: 510rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #FCC92D;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(252, 201, 45, 0.3);
				border-radius: 12rpx;
				text-align: center;
				color: #262626;
				font-weight: bold;
				font-size: 28rpx;
				align-self: center;
				margin-bottom: 30rpx;
			}
		}
	}

	@keyframes zoomInDown {
		from {
			opacity: 0;
			-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}

		60% {
			opacity: 1;
			-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
			animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
		}
	}
</style>